import React, { PureComponent } from 'react';
import styles from './index.less';
import { Carousel } from 'antd';
import IconFont from "../IconFont";

export default class CarouselIndex extends PureComponent {
  handlePrev = () => {
    this.refs.img.prev()
  };
  
  handleNext = () => {
    this.refs.img.next()
  };
  render() {
    return (
      <div className={styles.carousel}>
        <span className={styles.leftImg} onClick={this.handlePrev}>
          <IconFont type="icon-zuo"/>
        </span>
        <span className={styles.rightImg} onClick={this.handleNext}>
          <IconFont type="icon-you"/>
        </span>
        <Carousel  ref='img' autoplay>
          <div >
            <h3>1</h3>
          </div>
          <div >
            <h3>2</h3>
          </div>
          <div >
            <h3>3</h3>
          </div>
          <div >
            <h3>4</h3>
          </div>
        </Carousel>
      </div>
    );
  }
}
